<template>
<div :class="className" :style="{height:height,width:width}">
     <div style="color:#1797d6;font-size:18px;margin-bottom:18px">高价值专利分布</div>
      <el-table height="280" :header-cell-style="{background:'#eee',color:'black'}" size="mini" :data="raddData" style="width: 100%; border: 1px solid #ebebeb;box-shadow: 4px 4px 4px #efeeee;border-radius:6px">

        <el-table-column align="left" prop="quoteName" width="226" label="高价值专利指标名称" />
        <el-table-column align="left" prop="num" label="数量" />
        <el-table-column align="left" prop="ratio" label="占比" />
       

    </el-table>




</div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 3000

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        raddData: {
            type: Array,
            default: function () {
                return []
            }
        },
        height: {
            type: String,
            default: '350px'
        }
    },
    watch: {
        raddData: {
            handler(newV, oldV) {
                console.log("radd",newV)
                if (newV.length != 0) {

                    // let indicatorL = newV[0].slice(1)
                    // // console.log("indicatorL", indicatorL)
                    // let legentArr = newV.slice(1)

                    // let alist = []
                    // indicatorL.forEach((item, index) => {
                    //     let obj = {}
                    //     obj.name = item
                    //     obj.color = "black"
                    //     // obj.lineStyle={
                    //     //   color:'rgba(32,126,255,.5)'
                    //     // }
                    //     // obj.max=
                    //     alist.push(obj)
                    // })

                    // this.indicator = alist

                    // let dataList = []
                    // let tem = []

                    // legentArr.forEach((item, index) => {
                    //     let reObj = {}
                    //     tem.push(item[0])
                    //     reObj.name = item[0]
                    //     reObj.value = item.slice(1)
                    //     dataList.push(reObj)
                    // })

                    // this.legendArr = tem
                    // this.dataList = dataList

                    // this.initChart()

                }

            },
            deep: true
        }
    },
    data() {
        return {
            chart: null,
            indicator: [],
            legendArr: [],
            dataList: [],
            myData: []
        }
    },
    mounted() {
        setTimeout(() => {
        }, 500)

        // })
    },
    beforeDestroy() {
        // if (!this.chart) {
        //     return
        // }
        // this.chart.dispose()
        // this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$el, 'macarons')
            let colors = ['rgba(255,150,50,.5)', 'rgba(64,158,255,.5)']

            this.chart.setOption({
                // tooltip: {
                //   trigger: 'axis',
                //   axisPointer: { // 坐标轴指示器，坐标轴触发有效
                //     type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                //   }
                // },

                title: {
                    text: '专利类型分布情况'
                },
                color:colors,

                radar: {
                    // radius: '66%',
                    center: ['50%', '50%'],
                    // splitNumber: 8,
                    // splitArea: {
                    //   areaStyle: {
                    //     color: 'rgba(127,95,132,.3)',
                    //     opacity: 1,
                    //     shadowBlur: 45,
                    //     shadowColor: 'rgba(0,0,0,.5)',
                    //     shadowOffsetX: 0,
                    //     shadowOffsetY: 15
                    //   }
                    // },
                    indicator: this.indicator
                    // [
                    //   { name: 'Sales', max: 10000 },
                    //   { name: 'Administration', max: 20000 },
                    //   { name: 'Information Technology', max: 20000 },
                    //   { name: 'Customer Support', max: 20000 },

                    // ]
                },
                legend: {
                    left: 'center',
                    top: '40px',
                    left: '70%',
                    // top:'2',
                    // bottom: '10',
                    // data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
                    data: this.legendArr
                },
                series: [{
                    type: 'radar',
                    // symbolSize: 0,
                    // areaStyle: {
                    //   normal: {
                    //     shadowBlur: 13,
                    //     shadowColor: 'rgba(0,0,0,.2)',
                    //     shadowOffsetX: 0,
                    //     shadowOffsetY: 10,
                    //     opacity: 1
                    //   }
                    // },
                    data: this.dataList,

                    // [
                    //   {
                    //     value: [5000, 7000, 12000, 11000, 15000, 14000],
                    //     name: 'Allocated Budget'
                    //   },
                    //   {
                    //     value: [4000, 9000, 15000, 15000, 13000, 11000],
                    //     name: 'Expected Spending'
                    //   },
                    //   {
                    //     value: [5500, 11000, 12000, 15000, 12000, 12000],
                    //     name: 'Actual Spending'
                    //   }
                    // ],
                    animationDuration: animationDuration
                }]
            })
        }
    }
}
</script>
